<template>
  <div class="big">
    <div class="banner">
      <van-swipe :autoplay="3000" :width="173" :height="210">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="interval">
      <div class="bottom" v-for="(v, index) in arr1" :key="index">
        <p class="txt" @click="ms()">{{ v }}</p>
        <div class="two">
          <div class="left" v-for="(img, index) in arr" :key="index">
            <img :src="img.pic" alt="">
            <p class="price">￥{{ img.price }}</p>
          </div>
          <!-- <div class="right">
                      <img src="https://pic.cdfgsanya.com/assets/upload/product/39714c6e26af68c2fc3ce0cb0fa013e2_400x400.jpg" alt="">
                      <p>￥1299</p>
                    </div> -->
        </div>

      </div>

    </div>
  </div>
</template>

<script>

import service from "../../../../src/utils/service";
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [],
      arr: [],
      arr1: ["限时秒杀", "超值闪购"]
    };
  },
  methods: {
    ms() {
      this.$router.push("/mszq")
    }
  },
  mounted() {
    service({
      url: "http://localhost:3000/banner",
      method: "get"
    }).then(res => {
      // console.log(res);
      res.data.forEach(element => {
        this.images.push(element.img);
      });
    });
    service({
      url: "http://localhost:3000/seckill",
      method: "get"
    }).then(res => {
      res.data.forEach(element => {
        this.arr.push(element);
      });


    });
  },
}
</script>

<style>
.big {
  display: flex;
  background-color: #f8f6f6;
}

.banner {
  width: 173px;
  height: 219px;
  margin: 10px;
  border-radius: 10px 20px;
}

.van-swipe-item img {
  width: 173px;
  height: 210px;

}

.interval {
  width: 173px;
  height: 210px;
  margin: 10px;
  border-radius: 10px;
  background-color: #fff;
  border-radius: 10px;
}

/* .interval .top {
    height: 104px;
  }
  .interval .top p {
    background-color: #fdedee;
    font-size: 14px
  };
  .interval .bottom p {
    background-color: #fdedee
  };
  .interval .top .one {
    display: flex;
  }
  .interval .top .one .left {
    width: 50%;
    display: flex;
  }
  .interval .top .one .left img {
    width: 52px;
    height: 52px;
  }
  .interval .top .one .right {
    width: 50%;
    display: flex;
  }
  .interval .top .one .right img {
    width: 52px;
    height: 52px;
  } */
.interval .bottom {
  border-radius: 10%;
}

.interval .bottom .two {
  display: flex;
}

.interval .bottom .two .left img {
  width: 52px;
  height: 52px;
}

.interval .bottom .two div {
  margin: 0 20px 0 10px;

}

.interval .bottom .two .left .price {
  font-size: 14px;
}

.interval .bottom .txt {
  background-color: #fbdde0;
  background-image: linear-gradient(#fbdde0, #fff);
}
</style>